<script setup>
import {
  getSalesBoardXsckDb,
  getSalesBoardXsckDbQty,
} from "@/api/visual/salesBoard.js";
import { formatMoney } from "@/utils/globalMethod";
import { useLocalStorage } from "@vueuse/core";

const viewData1 = ref([]);
const viewData2 = ref([]);
const key = ref(1);
const chooseSelct = useLocalStorage("salesBoard7.type", "Amount");
const viewData1Count = computed(() =>
  viewData1.value.reduce((curr, prev) => curr + Number(prev), 0)
);
const viewData2Count = computed(() =>
  viewData2.value.reduce((curr, prev) => curr + Number(prev), 0)
);

const option = computed(() => ({
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisLabel: {
        color: "#ccc1c1",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        lineStyle: {
          color: "#2b2c33",
        },
      },
      axisLabel: {
        color: "#ccc1c1",
      },
    },
  ],
  grid: {
    left: "5%",
    right: "5%",
    bottom: "20%",
    containLabel: true,
  },
  series: [
    {
      name: "本期",
      itemStyle: {
        color: "#FF0000",
      },
      label: {
        show: true,
        color: "#fff",
      },
      emphasis: {
        focus: "series",
      },
      data: viewData1.value,
      type: "line",
      smooth: true,
    },
    {
      name: "同期",
      itemStyle: {
        color: "#0066FF",
      },
      label: {
        show: true,
        color: "#fff",
      },
      emphasis: {
        focus: "series",
      },
      data: viewData2.value,
      type: "line",
      smooth: true,
    },
  ],
}));

const loadData = async () => {
  let data = [];
  if (chooseSelct.value === "Amount") {
    const { data: dataItem } = await getSalesBoardXsckDb();
    data = dataItem;
  } else {
    const { data: dataItem } = await getSalesBoardXsckDbQty();
    data = dataItem;
  }

  delete data[0]["db"];
  delete data[1]["db"];

  viewData1.value = Object.values(data[0]).map((item) => item.toFixed(2));
  viewData2.value = Object.values(data[1]).map((item) => item.toFixed(2));
};

const keyResize = () => {
  key.value++;
};

onMounted(() => {
  window.addEventListener("fullscreenchange", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("fullscreenchange", keyResize);
});

onMounted(loadData);
</script>

<template>
  <div class="ps_w_h_100 salesBoard7">
    <dv-border-box10 :key="key">
      <el-card class="ps_w_h_100 salesBoard7-card">
        <template #header>
          <div class="salesBoard7-card-header board-title">
            <span v-if="chooseSelct === 'Amount'">
              {{
                `本期为${new Date().getFullYear()}年，单位：万元，币别：RMB（本币含税金额），数据来源：销售出货单 `
              }}
            </span>
            <span v-else>
              {{
                `本期为${new Date().getFullYear()}年，数量：万，数据来源：销售出货单 `
              }}
            </span>
            <span>
              <span class="bq">
                本期合计：
                <span>{{ formatMoney(viewData1Count) }}</span>
              </span>
              <span class="tq">
                同期合计：
                <span>{{ formatMoney(viewData2Count) }}</span>
              </span>
            </span>
            <div>
              <select
                class="chart-select"
                v-model="chooseSelct"
                @change="loadData"
              >
                <option value="Amount" label="金额"></option>
                <option value="Qty" label="数量"></option>
              </select>
            </div>
          </div>
        </template>

        <ps-chart2 :option="option"></ps-chart2>
      </el-card>
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss">
.salesBoard7 {
  &-card-header {
    display: flex;
    justify-content: space-between;

    .bq {
      margin-right: 20px;
    }
  }
}

:deep(.el-card) {
  background-color: transparent;
  border: unset;

  .el-card__body {
    padding: 0;
    height: 100%;
  }
}
</style>
